<template>
  <view class="test-tools flex flex-col gap-2">
    <n-card>
      <span>左声道</span>
      <span>频率调试 ({{ leftFrequency }}Hz)</span>
      <div class="flex flex-row items-center gap-2">
        <n-icon @click="handleLeftFrequencyDecrease">
          <Remove/>
        </n-icon>
        <n-slider v-model:value="leftFrequency" :min="0" :max="2000" :step="leftFrequencyStep"/>
        <n-icon @click="handleLeftFrequencyIncrease">
          <Add/>
        </n-icon>
      </div>
      <span>微调步长 ({{ leftFrequencyStep }})</span>
      <n-radio-group v-model:value="leftFrequencyStep">
        <n-radio-button
            v-for="song in leftFrequencyStepList"
            :key="song.value"
            :value="song.value"
        >
          {{ song.label }}
        </n-radio-button>
      </n-radio-group>
      <div class="flex flex-row items-center gap-2">
        <n-icon @click="handleLeftStepDecrease">
          <Remove/>
        </n-icon>
        <n-slider v-model:value="leftFrequencyStep" :min="0.01" :max="10" :step="0.01"/>
        <n-icon @click="handleLeftStepIncrease">
          <Add/>
        </n-icon>
      </div>
      <span>倍频测试 (实际频率: {{ leftActualFrequency }}Hz)</span>
      <div class="flex flex-row gap-2">
        <n-icon class="top-2" @click="handleLeftDoublingDecrease">
          <Remove/>
        </n-icon>
        <n-slider v-model:value="leftFrequencyDoubling" :marks="leftFrequencyDoublingList" step="mark" :min="1"
                  :max="7"/>
        <n-icon class="top-2" @click="handleLeftDoublingIncrease">
          <Add/>
        </n-icon>
      </div>
    </n-card>

    <n-card>
      <span>右声道</span>
      <span>频率调试 ({{ rightFrequency }}Hz)</span>
      <div class="flex flex-row items-center gap-2">
        <n-icon @click="handleRightFrequencyDecrease">
          <Remove/>
        </n-icon>
        <n-slider v-model:value="rightFrequency" :min="0" :max="2000" :step="rightFrequencyStep"/>
        <n-icon @click="handleRightFrequencyIncrease">
          <Add/>
        </n-icon>
      </div>
      <span>微调步长 ({{ rightFrequencyStep }})</span>
      <n-radio-group v-model:value="rightFrequencyStep">
        <n-radio-button
            v-for="song in rightFrequencyStepList"
            :key="song.value"
            :value="song.value"
        >
          {{ song.label }}
        </n-radio-button>
      </n-radio-group>
      <div class="flex flex-row items-center gap-2">
        <n-icon @click="handleRightStepDecrease">
          <Remove/>
        </n-icon>
        <n-slider v-model:value="rightFrequencyStep" :min="0.01" :max="10" :step="0.01"/>
        <n-icon @click="handleRightStepIncrease">
          <Add/>
        </n-icon>
      </div>
      <span>倍频测试 (实际频率: {{ rightActualFrequency }}Hz)</span>
      <div class="flex flex-row gap-2">
        <n-icon class="top-2" @click="handleRightDoublingDecrease">
          <Remove/>
        </n-icon>
        <n-slider v-model:value="rightFrequencyDoubling" :marks="rightFrequencyDoublingList" step="mark" :min="1"
                  :max="7"/>
        <n-icon class="top-2" @click="handleRightDoublingIncrease">
          <Add/>
        </n-icon>
      </div>
    </n-card>
  </view>
</template>

<script setup>
import {ref, computed} from 'vue'
import {Add, Remove} from '@vicons/ionicons5'

// 左声道频率值
const leftFrequency = ref(0);

// 左声道倍频值
const leftFrequencyDoubling = ref(4);
const leftFrequencyDoublingList = ref({
  1: '1/8',
  2: '1/4',
  3: '1/2',
  4: '1',
  5: '2',
  6: '4',
  7: '8',
});

// 左声道步长值
const leftFrequencyStep = ref(0.01);
const leftFrequencyStepList = ref([
  {
    label: '0.01',
    value: 0.01
  },
  {
    label: '0.1',
    value: 0.1
  },
  {
    label: '1',
    value: 1
  },
  {
    label: '10',
    value: 10
  },
]);

// 计算左声道实际频率值
const leftActualFrequency = computed(() => {
  const multipliers = {
    1: 0.125,
    2: 0.25,
    3: 0.5,
    4: 1,
    5: 2,
    6: 4,
    7: 8
  };
  const result = leftFrequency.value * multipliers[leftFrequencyDoubling.value];
  return Math.round(result * 100) / 100;
});

// 左声道频率增加按钮处理
const handleLeftFrequencyIncrease = () => {
  leftFrequency.value += leftFrequencyStep.value;
  if (leftFrequency.value > 2000) leftFrequency.value = 2000;
};

// 左声道频率减少按钮处理
const handleLeftFrequencyDecrease = () => {
  leftFrequency.value -= leftFrequencyStep.value;
  if (leftFrequency.value < 0) leftFrequency.value = 0;
};

// 左声道步长增加按钮处理
const handleLeftStepIncrease = () => {
  leftFrequencyStep.value += 0.01;
  if (leftFrequencyStep.value > 10) leftFrequencyStep.value = 10;
  leftFrequencyStep.value = Math.round(leftFrequencyStep.value * 100) / 100;
};

// 左声道步长减少按钮处理
const handleLeftStepDecrease = () => {
  leftFrequencyStep.value -= 0.01;
  if (leftFrequencyStep.value < 0.01) leftFrequencyStep.value = 0.01;
  leftFrequencyStep.value = Math.round(leftFrequencyStep.value * 100) / 100;
};

// 左声道倍频增减处理函数
const handleLeftDoublingIncrease = () => {
  if (leftFrequencyDoubling.value < 7) {
    leftFrequencyDoubling.value++;
  }
};

const handleLeftDoublingDecrease = () => {
  if (leftFrequencyDoubling.value > 1) {
    leftFrequencyDoubling.value--;
  }
};

// 右声道频率值
const rightFrequency = ref(0);

// 右声道倍频值
const rightFrequencyDoubling = ref(4);
const rightFrequencyDoublingList = ref({
  1: '1/8',
  2: '1/4',
  3: '1/2',
  4: '1',
  5: '2',
  6: '4',
  7: '8',
});

// 右声道步长值
const rightFrequencyStep = ref(0.01);
const rightFrequencyStepList = ref([
  {
    label: '0.01',
    value: 0.01
  },
  {
    label: '0.1',
    value: 0.1
  },
  {
    label: '1',
    value: 1
  },
  {
    label: '10',
    value: 10
  },
]);

// 计算右声道实际频率值
const rightActualFrequency = computed(() => {
  const multipliers = {
    1: 0.125,
    2: 0.25,
    3: 0.5,
    4: 1,
    5: 2,
    6: 4,
    7: 8
  };
  const result = rightFrequency.value * multipliers[rightFrequencyDoubling.value];
  return Math.round(result * 100) / 100;
});

// 右声道频率增加按钮处理
const handleRightFrequencyIncrease = () => {
  rightFrequency.value += rightFrequencyStep.value;
  if (rightFrequency.value > 2000) rightFrequency.value = 2000;
};

// 右声道频率减少按钮处理
const handleRightFrequencyDecrease = () => {
  rightFrequency.value -= rightFrequencyStep.value;
  if (rightFrequency.value < 0) rightFrequency.value = 0;
};

// 右声道步长增加按钮处理
const handleRightStepIncrease = () => {
  rightFrequencyStep.value += 0.01;
  if (rightFrequencyStep.value > 10) rightFrequencyStep.value = 10;
  rightFrequencyStep.value = Math.round(rightFrequencyStep.value * 100) / 100;
};

// 右声道步长减少按钮处理
const handleRightStepDecrease = () => {
  rightFrequencyStep.value -= 0.01;
  if (rightFrequencyStep.value < 0.01) rightFrequencyStep.value = 0.01;
  rightFrequencyStep.value = Math.round(rightFrequencyStep.value * 100) / 100;
};

// 右声道倍频增减处理函数
const handleRightDoublingIncrease = () => {
  if (rightFrequencyDoubling.value < 7) {
    rightFrequencyDoubling.value++;
  }
};

const handleRightDoublingDecrease = () => {
  if (rightFrequencyDoubling.value > 1) {
    rightFrequencyDoubling.value--;
  }
};
</script>

<style lang="scss">
.test-tools {
  .title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
}
</style>
